<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论视频列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <#include "/view/admin/head.html"/>
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="${base}/jstool/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-select/lang/defaults-zh_CN.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-select/css/bootstrap-select.min.css" />

    <style type="text/css">
        .table-class{
            width:90%;
            text-align: center;
            border:1px solid #afd9ee;
            margin:0 auto;
            margin-top: 50px;
        }
        .list-path{
            height: 50px;
            line-height: 50px;
            background-color: #9acfea;

        }
        table th{
            text-align: center;
            WORD-WRAP: break-word;
            width: 100px;
        }
        table thead tr {
            background-color: #9acfea;
        }
        .table-query{
            /*height: 40px;*/
            /*width:80px;*/
            /*text-align: center;*/
            white-space:nowrap;
            /*position: relative;*/
            float: left;
            display:inherit;
            /*display: inline;*/


        }
        .label-head{
            height: 60px;
            width: 100%;
        }
        .bs-example .input-group{
            width:300px;
            float: left;
            margin-top:20px;

        }
        .bank-label{
            width:25px;
            float: left;
        }
        .label-hidden{
            display: none;
        }
        .panel-body{
            padding-top: 0px;
        }
        .input-group input[type='text']{
            z-index: inherit;
        }
        .modal-content{
            width: 700px;
        }
       /* .input-group{
            margin-top:20px;
        }*/
    </style>
    <script type="text/javascript">
        function query(dm){
            var href = "${base}/czjcommentsvideo/list.do?";



            href+='commentsId='+$('#commentsId').val();
                    

            location.href=href;
        }
        $(function() {
            //初始化
        });
    </script>
</head>
<body>

<#include "/view/admin/listnav.html"/>

<div class="table-class">
    <div hidden class="panel panel-default" style="margin: 10px 50px 10px;">
     <div class="panel-body">
        <form class="bs-example bs-example-form" role="form">



            <div class="input-group">
                <span class="input-group-addon">评论</span>
                <select id="commentsId" name="commentsId"
                        class="form-control selectpicker"   data-live-search="true"
                >
                    <option value="">请选择评论</option>
                            <#list listCommentsId as lv>
                                <option value="${lv.value!}"
                                <#if entity.commentsId??&&entity.commentsId == lv.value >
                                    selected="selected"
                                </#if>
                                >${lv.name!}</option>
                            </#list>

                </select>

            </div>
                <span class="bank-label">&nbsp;</span>



            <div class="input-group" style="text-align: right;">
                <a class="btn btn-info"  href="javascript:query(this)"><span class="glyphicon glyphicon-search"></span> 查找</a>

            </div>
        </form>
     </div>
    </div>

<#include "/view/admin/opermsg.html"/>


    <table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>序号</th>
                <th class="label-hidden">评论视频</th>
                <th>视频缩图</th>
                <th>评论视频</th>
                <th>评论</th>

            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list pagination.list as c>
            <tr>
                <td>${(pagination.pageNo-1)*pagination.pageSize+1+c_index}</td>
                        <td class="label-hidden">${c.commentsVideoId!}</td>
                        <td><img src="${base}${c.picpath!}" height="50px"></td>
                        <td>
                            <#if c.videoUrl??>
                                <button class="btn btn-primary" data-toggle="modal" data-target="#videoAction${c_index}">视频播放</button>
                            <!-- 模态框（Modal） -->
                            <div class="modal fade" id="videoAction${c_index}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">视频</h4>
                                        </div>
                                        <div class="modal-body">
                                            <video width="600px" height="400" controls autobuffer>
                                                <source src="${base}${c.videoUrl!}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
                                            </video>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <!--<button type="button" class="btn btn-primary">提交更改</button>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <#else>视频不存在
                            </#if>
                        </td>
                        <td> 
                            <#if c.commentsId??>
                                    <#list listCommentsId as lv>
                                        <#if lv.value??&&c.commentsId == lv.value >
                                        ${lv.name!}
                                        </#if>
                                    </#list>

                            </#if>
                        </td>

                <td>
                    <!--<a href="${base}/czjcommentsvideo/detail.do?commentsVideoId=${c.commentsVideoId!}" class="btn btn-primary">详情</a>-->
                </td>

            </tr>


        </#list>
        <#if 0==pagination.totalCount>
            <tr>
                <td colspan="7" style="color: red"> 没有相关数据 </td>
            </tr>
        </#if>





        </tbody>
    </table>
        <!--<span style="text-align: left"> <a href="#" class="btn btn-primary">新增</a></span>-->
    <ul class="pagination" >

        <#include "/view/admin/pagination.html"/>


</div>
<script>
    function setPage(pageNo,pageSize){
        var href = "${base}/czjcommentsvideo/list.do?";




        href+="&pageNo="+pageNo;
        href+="&pageSize="+pageSize;
        location.href=href;
    }
    function checkDelete(url){
        if (window.confirm("确认删除吗?")) {
            location.href=url;
        }
    }

</script>

</body>
</html>
